<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select Test</title>
</head>
<body>
    <div id="app1">
        <select v-model="selected">
            <option>html</option>
            <option value="js">JavaScript</option>
            <option>css</option>
        </select>
        <p>选择的项是：{{ selected }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app2">
        <select v-model="selected" multiple>
            <option>html</option>
            <option value="js">JavaScript</option>
            <option>css</option>
        </select>
        <p>选择的项是：{{ selected }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app3">
        <select v-model="selected">
            <option v-for="option in options" :value="option.value">{{ option.text }}</option>
        </select>
        <p>选择的项是：{{ selected }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app4">
        <select v-model="selected">
            <option :value="{ number : 123 }">123</option>
        </select>
        {{ selected.number }}
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app1 = new Vue({
            el: '#app1',
            data: {
                selected: 'html'
            }
        });
        var app2 = new Vue({
            el: '#app2',
            data: {
                selected: ['html', 'js']
            }
        });
        var app3 = new Vue({
            el: '#app3',
            data: {
                selected: 'html',
                options: [
                    {
                        text: 'HTML',
                        value: 'html'
                    },
                    {
                        text: 'JavaScript',
                        value: 'js'
                    },
                    {
                        text: 'CSS',
                        value: 'css'
                    }
                ]
            }
        });
        var app4 = new Vue({
            el: '#app4',
            data: {
                selected: ''
            }
        })
    </script>
</body>
</html>